<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getSkuInfoListApi } from '@/apis/pms/sku'
import {
  saveSeckSkuRelationApi, getSeckSkuRelationListApi,
  updateSeckillSkuRelationApi, deleteSeckillSkuRelationApi
} from '@/apis/sms/seckillSkuRelation'

// 获取商品
const seckillParams = reactive({
  pageNum: 1,
  pageSize: 10,
  promotionId: '',
  sessionId: '',
})
const seckillSkuData = ref({})
const getSeckSkuRelationData = async () => {
  const res = await getSeckSkuRelationListApi(seckillParams)
  seckillSkuData.value = res.data
}

// 展示添加框
const dialogTableVisible = ref(false);
const showSkuList = () => {
  dialogTableVisible.value = true;
  getSkuListData()
}

// 请求数据
const skuList = ref([])
const params = reactive({
  skuTitle: '',
  pageNum: 1,
  pageSize: 10,
})
const getSkuListData = async () => {
  const res = await getSkuInfoListApi(params);
  skuList.value = res.data;
}

// 点击选项框
const skuIds = ref([])
const handleSelectionChange = (selection, row) => {
  skuIds.value = []
  selection.forEach(element => {
    skuIds.value.push(element.skuId)
  });
}

// 确定
const form = ref({})
const handleConfirm = () => {
  form.value.skuIds = skuIds
  saveSeckSkuRelationApi(form.value).then(res => {
    if (res.code === 0) {
      getSeckSkuRelationData()
      dialogTableVisible.value = false
    }
  })
}


// 编辑
const dialogEditVisible = ref(false)
const currentRow = ref({})
const handleSetting = (row) => {
  currentRow.value = row
  dialogEditVisible.value = true
}

// 设置确定
const submitForm = (ruleFormRef) => {
  updateSeckillSkuRelationApi(currentRow.value).then(res => {
    if (res.code === 0) {
      getSeckSkuRelationData()
      dialogEditVisible.value = false
    }
  })
}

// 删除
const handleRemove = (id) => {
  ElMessageBox.confirm(
    '你确定要删除此数据吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteSeckillSkuRelationApi([id]).then(res => {
        if (res.code === 0) {
          getSeckSkuRelationData()
        }
      })
    })
    .catch(() => {
    })
}


const route = useRoute()
onMounted(() => {
  form.value.promotionId = route.query.promotionId
  form.value.sessionId = route.query.sessionId
  seckillParams.promotionId = route.query.promotionId
  seckillParams.sessionId = route.query.sessionId
  getSeckSkuRelationData()
})
</script>

<template>
  <div class='container'>
    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <el-button type="primary" style="margin-left: 10px;" @click="showSkuList">添加</el-button>
      </el-col>
    </el-row>
    <!-- 表格数据  -->
    <el-row>
      <el-col :span="24">
        <el-table :data="seckillSkuData.list" style="width: 100%">
          <el-table-column prop="skuTitle" label="商品名称" align="center" />
          <el-table-column prop="price" label="商品价格" align="center" />
          <el-table-column prop="stock" label="剩余库存" align="center" />
          <el-table-column prop="seckillPrice" label="秒杀价格" align="center" />
          <el-table-column prop="seckillCount" label="秒杀件数" align="center" />
          <el-table-column prop="seckillLimit" label="限购件数" align="center" />
          <el-table-column prop="seckillSort" label="商品排序" align="center" />
          <el-table-column>
            <template v-slot="scoped">
              <el-button type="primary" text size="small" :icon="EditPen"
                @click="handleSetting(scoped.row)">编辑</el-button>
              <el-button type="primary" text size="small" :icon="EditPen"
                @click="handleRemove(scoped.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>

  <el-dialog v-model="dialogTableVisible" title="选择商品" width="800">
    <el-table :data="skuList.list" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="skuTitle" label="商品标题" align="center" />
      <el-table-column property="createTime" label="创建时间" align="center" />
      <el-table-column property="price" label="价格" align="center" />
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogEditVisible" title="设置商品" width="800">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="currentRow" status-icon :rules="rules">
      <el-form-item label="秒杀价格" prop="pass">
        <el-input v-model="currentRow.seckillPrice" autocomplete="off" />
      </el-form-item>
      <el-form-item label="秒杀件数" prop="checkPass">
        <el-input v-model="currentRow.seckillCount" autocomplete="off" />
      </el-form-item>
      <el-form-item label="限购件数" prop="age">
        <el-input v-model.number="currentRow.seckillLimit" />
      </el-form-item>
      <el-form-item label="商品排序" prop="age">
        <el-input v-model.number="currentRow.seckillSort" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang='scss'></style>